<template>
	<view class="container" style="background: #FAFAFA;" :style="{paddingBottom:hasCard.value ? '0' : '300rpx'}">
		<!--充值明细盒子-->
		<view class="topSec"></view>
		<view class="mainBx p_rlt padding-bottom">
			<view class="padding-lr text-lg paddingTop" :class="state.isShowPayResult ? 'hide' : 'R-topbox'">
				<block>
					<!-- <view v-if="state.source === 1" class="solid-bottom flex align-center R-stores">
						<view class="R-stitel">代充手机号</view>
						<input type="text" v-model="state.rechargePhone" maxlength="11" placeholder="请输入代充值会员手机号码"
							placeholder-style="color:#C2C2C2" class="flex-sub R-money" />
					</view> -->
					<view class="solid-bottom flex justify-between align-center R-stores" @click="mnavTo(`/pages/others/shopList/shopList?source=recharge&shopId=${rechargeShop.id}`)">
						<view class="R-stitel">充值门店</view>
						<view class="flex-sub padding-right-xs">
							{{ rechargeShop.name || '' }}
						</view>
						<text class="cuIcon-right"></text>
					</view>
				</block>
				<view class="solid-bottom flex align-center R-stores" @click="handleCards" v-if="state.source != 1">
					<view class="R-stitel">饭卡号</view>
					<!-- <view type="text" class="flex-sub R-money text-red">{{ state.balanceNum }}元</view> -->
					<view v-if="hasCard" class="flex-sub padding-right-xs padding-tb-xs">
						<block v-if="nowChoseCadr.phone">
							<text>{{plusXing(nowChoseCadr.phone,3,4)}}</text>
							<text class="padding-left-xxs margin-left-xs redfont">¥{{nowChoseCadr.amount||0}}</text>
						</block>
					</view>
					<!-- @click="mnavTo('/pages/user/mycard/mycard')" -->
					<view v-else class="flex-sub flex padding-right-xs align-center padding-tb-xs">
						<view class="text-c6 flex-sub">暂无饭卡</view>
						<text class="padding-left-xxs margin-left-xs text-ngreen"><!-- 去绑卡 --></text>
					</view>

					<text class="cuIcon-right"></text>
				</view>
				<!-- <view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">充值金额(元)</view>
					<input type="text" v-model="state.rechargeNum_real" :disabled="true" maxlength="6"
						placeholder="VIP会员充值金额" placeholder-style="color:#C2C2C2" class="flex-sub R-money" />
				</view> -->
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">推荐人</view>
					<input type="text" v-model="formParams.recomName" maxlength="10" placeholder="请输入推荐人编号"
						placeholder-class="plhcs" class="flex-sub R-money" />
				</view>
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">备注</view>
					<input type="text" v-model="formParams.notes" maxlength="10" placeholder="请输入备注"
						placeholder-class="plhcs" class="flex-sub R-money" />
				</view>
			</view>
			<!-- 充值的金额 -->
			<view :class="state.isShowPayResult ? 'hide' : 'Rechargeamount'">
				<view class="A-titel">请选择充值金额</view>
				<view class="listbx flex align-center flex-wrap padding-left-sm p_rlt">
					<view v-if="pageLoaded&&rechargeList.length <= 0" class="noData">暂无充值商品</view>
					<view v-else class="A-ambox point" v-for="(item, index) in rechargeList" :key="index"
						@click="chooseMeal(index)" :class="{ on: typeClass === index}">
						<view class="amContentBox">
							<view :class="item.activityPrice ? 'thTip' : 'hide'">特惠</view>
							<view class="A-ammony text-cut">
								{{ item.activityPrice?item.activityPrice:item.nsell_price||'0' }}</view>
							<view :class="item.nsell_price ? 'A-amintegral' : 'hide'">
								{{ item.activityPrice&&item.sellerLabel?item.sellerLabel : '售价 ' + item.nsell_price + '元'}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="pageLoaded&&remarksList.length>0"
					class="adetbx margin-left-sm margin-top lh_z p_rlt text-lg" :class="{show:showD}">
					<view class="text-lg padding-bottom-sm">
						赠送明细
					</view>
					<view v-for="(item,index) in remarksList" :key="index" class="text-orange margin-top-xs">
						{{item||''}}
					</view>
					<view v-if="remarksList&&remarksList.length>2"
						class="morbox bg-white text-c6 text-sm flex align-center" @click="showD=!showD">
						<view class="flex-sub padding-left-sm">
							<text v-show="!showD">...</text>
						</view>
						<view
							class="flex flex--direction justify-center padding-tb padding-lr-lg align-center text-center point">
							<view class="">
								展开
							</view>
							<view class="">
								<text :class="showD?'cuIcon-fold':'cuIcon-unfold'"></text>
							</view>
						</view>
					</view>
				</view>

				<view class="full_btn">
					<view class="mbtn point" v-if="hasCard" @click.stop="submitOrder">
						立即充值
					</view>
					<view v-else>
						<view class="bangka carstyle flex justify-center" @click="cals(true)">
							去开卡
						</view>
						<view class="kaika carstyle flex justify-center align-center" @click="cals(false)">
							我有卡，去绑卡<text class="cuIcon-right"></text>
						</view>
					</view>
				</view>
				<!-- <view class="Immediaterecharge" :class="state.groupLockVcard ? 'gray':''" @tap="submitValidaRecharge">立即充值</view> -->
			</view>
			<!--充值成功页面-->
			<view :class="state.isShowPayResult ? 'justColor' : 'hide'">
				<view class="flex justify-center statuIco">
					<text class="cuIcon-roundcheckfill"></text>
				</view>
				<view class="payRusult">充值成功</view>
				<view class="money">
					￥
					<text class="bigMoney">{{ state.rechargeMoney || '0.00' }}</text>
				</view>
				<view class="noti">支付金额</view>
				<button class="cu-btn confirm bg-white" @click="goBack">返回个人中心</button>
			</view>
			<!--代充值二维码模式窗体-->
			<!-- <view class="cu-modal" :class="state.rechargeModel ? 'show' : ''">
				<view class="cu-dialog">
					<view class="bg-img" style="background-image; height:280px;">
						<view class="cu-bar justify-end text-gray">
							<view style="width: 100%; margin-left: 60rpx;">微信支付</view>
							<view class="action" @tap="hideQrModel"><text class="cuIcon-close"></text></view>
						</view>
						<image mode="aspectFill" :src="state.rechargeQrUrl"></image>
					</view>
					<view class="cu-bar bg-white">
						<view class="action margin-0 flex-sub solid-left">请微信扫二维码支付</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="titip-text break-all">充值金额可在颐而康门店、颐而康精选商城、炖大侠进行消费。</view>
		<tb-privacy ref="prcy" :onNeed='true'></tb-privacy>
		<loading></loading>
		<checkCard ref="checkdRef" :selctCardId="linkCardId" @choseCad="choseCad" />
		<uni-popup ref="isfavRef" type="bottom">
			<view class="modelcon">
				<view class="favs">提示</view>
				<view class="flex justify-center align-center">
					<text class="fcon-tishijinggao"></text>
				</view>
				<view class="fav_v">暂未发现饭卡</view>
				<view class="foot_btn flex-direction">
					<view class="btns can" @click="cals(true)">去开卡</view>
					<view class="btns su" @click="cals(false)"> 我有卡，去绑卡<text class="cuIcon-right"></text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, nextTick } from "vue";
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { queryShopRechargeList, createRechargeOrder, checkOrderStatu, wx_Payment } from '@/api/vmeitime-http/index.js';
	import { mnavTo, showLoading, hideLoading, plusXing } from '@/utils/helper';
	import mFormRule from "@/config/formRule";
	import mChecker from "@/utils/checker";
	import checkCard from './checkeCard.vue';
	import mApi from '@/utils/mapi';
	import { useUserStore } from '@/stores/commonStore';
	import { useShopStore } from '@/stores/shopStore';
	import global from '@/utils/global';
	const userStore = useUserStore();
	const shopStore = useShopStore();
	const isfavRef = ref()
	const state = reactive({
		// typeClass: 0, //1开始
		source: '',
		intervalid: '',
		confirmNums: 0,
		isShowPayResult: false, //是否显示充值成功
		// rechargeList: [
		// 	{ amount: '1000', info: '售价1000', isActivity: false },
		// 	{ amount: '2000', info: '售价2000', isActivity: false },
		// 	{ amount: '3000', info: '售价3000', isActivity: false },
		// 	{ amount: '4000', info: '售价4000', isActivity: false },
		// 	{ amount: '5000', info: '售价4750', isActivity: true }
		// ], //充值信息
		memberDetails: '', //会员缓存数据
		// rechargeQrUrl: '', //二维码图片url
		// rechargeModel: '', //充值二维码模式
		// rechargePhone: '', //充值手机号码
		rechargeMoney: '', //充值成功显示金额
		rechargeNum: '', //充值金额
		rechargeNum_real: '',
		// remarks: '', //订单备注信息
		// recom: '',//推荐人
		// balanceNum: 0,
		groupLockVcard: false, //集团电子卡是否已锁定
		rechargeSelName: '颐而康长沙隆平园店'
		// shopDetails: {}, //充值的门店信息
		// checkIntervalid: '',
		// confirmNums1: 0,
		// hasLogin: false, //是否登录
		// rechargeOrderId: '', //充值订单ID
		// isMallVip: false, //是否商城VIP
		// goodsSellGroupList: [], //充值活动商品
		// rechargeUser: { userPhone: '', userCardNo: '' }, //充值用户信息
		// isRecharge: true, //是否能充值
		// replaceMemberDetails: {}, //代充值会员信息
		// wxOrderMoney: '',//微信支付金额
		// sellShopId: '', //默认/首页门店
		// rechargeType: 851, //充值订单类型
		// rechargeSku: '', //套餐组合唯一属性
		// rechargeActivityId: '',//充值活动ID
		// PayTypeList: '',
		// pay_no: '',
		// isFirst: true,
		// pageLoaded:false,
		// wechatOpenId:'',//微信openId
		// initOpenId:true,//加载微信OpenId
		// rechargeSelId:'',//充值门店id
		// isFromSelect:false,
		// transSelID:'',
		// recEventId:'',
		// fromQr:false,
		// defaultSelMember:'',
		// canRepeatClick:true,
		// wxPayed:false,
		// isPaying:false,
		// cardStatus:false
	})
	const rechargeShop = ref({
		name: '',
		id: ''
	});
	const formParams = ref({
		notes: '',//备注
		recomName: ''//推荐编号
	});
	const showD = ref(false);
	const checkdRef = ref();
	const nowChoseCadr = ref<any>({
		// cardName: "卡1(138***2271)",
		// cardPri:"222.3"
	});
	const rechargeList = ref([]);//充值商品
	const remarksList = ref([]);//充值商品
	const typeClass = ref(0);
	const pageLoaded = ref(false);
	const rechargeMoney = ref(0);//充值金额-展示
	const rechargeNum = ref(0);//充值金额
	const rechargeSku = ref('');//充值商品sku
	// const remarks = ref('');//推荐人
	// const birthDate = ref('1999-01-01')
	const curOrderId = ref('');//订单号
	const checkNums = ref(0);//查询状态数
	const intervalid = ref(null);
	const canRepeatClick = ref(true);
	const linkCardId = ref('');
	const isLogin=ref(false)
	
	onLoad(async (options) => {
		linkCardId.value = options.cardId || '';
		// if (!hasCard.value) {
		// 	isfavRef.value.open()
		// }
		// await nextTick()
		// await loadData()

		nextTick(() => {
			loadData()
		});
	})
	onShow(() => {
		// takeUserInfo('check')
		isLogin.value = uni.getStorageSync(global.IS_LOGIN) || false;
		pageLoaded.value && loadData()
	})
	const loadData = async (data : any = {}, source : any = '') => {
		initParams();
		checkdRef.value.initData('init');
		try {
			let res = await queryShopRechargeList({ nsell_member_id: rechargeShop.value.id, vtype: 8121, vstatus: 233 })
			pageLoaded.value = true;
			if (res.result && res.object) {
				rechargeList.value = res.object || [];
				// let rmks = [];
				// rechargeList.value.forEach((item, index) => {
				// 	item.remark ? rmks.push((index + '、' + item.remark)) : '';
				// })
				// remarksList.value = rmks;
				chooseMeal(0)
			} else {
				rezData()
				mApi.msg(res.shortMessage || '网络繁忙，请稍后。', res.code)
			}

		} catch (e) {
			pageLoaded.value = true;
			console.error(e)
		}
	}
	const initParams = () => {
		if (!rechargeShop.value.id || shopStore.rechargeShop.nmember_id) {
			rechargeShop.value.name = shopStore.rechargeShop.vnick || shopStore.shopInfo.vnick || '';
			rechargeShop.value.id = shopStore.rechargeShop.nmember_id || shopStore.shopInfo.nmember_id || '';//shopStore.curSellerMemberId;
			shopStore.rechargeShop.nmember_id && shopStore.setRechargeShop({})
		}
		// if(!cinputarr[0]||!cinputarr[3]){
		// 	formSetPwd.value.mobile = userStore.userInfo.vphone||'';
		// 	formSetPwd.value.name = userStore.userInfo.vnick||'';
		// }
		// console.log('initParams',formSetPwd.value,userStore.userInfo)

	}
	const rezData = () => {
		rechargeNum.value = 0;
		rechargeSku.value = '';
		rechargeMoney.value = 0;
		typeClass.value = null;
	}
	// 提交订单
	const submitOrder = async () => {
		try {

			if (!rechargeShop.value.id) {
				mApi.msg('请选择充值门店');
				return;
			}
			if (!nowChoseCadr.value.phone || !nowChoseCadr.value.card_no) {
				mApi.msg('请选择饭卡');
				return;
			}
			if (typeClass === null || !rechargeSku.value) {
				mApi.msg('请选择充值商品');
				return;
			}
			if (!rechargeNum.value) {
				mApi.msg('充值金额不能低于0');
				return;
			}
			let checkParam = mChecker.check(
				formParams.value,
				mFormRule.rechargeRule
			);
			if (!checkParam) {
				mApi.msg(mChecker.error.msg);
				return;
			}
			let formData = {
				sku: rechargeSku.value, //商品唯一规格ID
				buyNums: 1, //数量
				remarks: formParams.value.recomName,//技师编号
				pay_no: '3',//支付方式
				money: rechargeNum.value, //充值金额
				vtype: '851', //充值订单类型
				pointName: nowChoseCadr.value.card_no || '', //被充值人会员卡号
				pointPhone: nowChoseCadr.value.phone || '', //被充值人会员手机
				pointSellMemberId: rechargeShop.value.id || '', //充值门店
				sellerMemberId: shopStore.curSellerMemberId || ''
			};
			if (!canRepeatClick.value) {
				return
			}
			canRepeatClick.value = false;
			showLoading({ title: '提交...' })
			let res = await createRechargeOrder(formData);
			if (res.result && res.object) {
				checkProStatus(res.object)
			} else {
				rezSubmitParams()
				mApi.msg(res.shortMessage || '网络繁忙，请稍后再试！');
			}

		} catch (e) {
			rezSubmitParams()
			console.error(e)
		}


	}
	const rezSubmitParams = () => {
		canRepeatClick.value = true;
		hideLoading();
	}
	const checkProStatus = async id => {
		let res = await checkOrderStatu({ sessionid: id });
		if (res.state) {
			if (res.state === 'success') {
				curOrderId.value = id
				clearTimeout(intervalid.value);

				wxPay(id)

			} else if (res.state === 'fail') {
				rezSubmitParams();
				mApi.msg(res.messages || '提交失败，请稍后尝试');
			} else {
				checkNums.value++;
				console.log('checkProStatus次数：', checkNums.value);
				if (checkNums.value < 8) {
					intervalid.value = setTimeout(function () {
						checkProStatus(id);
					}, 2000);
				} else {
					rezSubmitParams();
					checkNums.value = 0;
					canRepeatClick.value = true;
					uni.showModal({
						title: '提示',
						content: res.messages || '提交失败，请稍后尝试',
						showCancel: false,
						confirmText: '知道了'
					})
				}
			}
		} else {
			rezSubmitParams()
			mApi.msg(res.messages || '提交失败，请稍后尝试');
		}
	}
	const wxPay = async (billId : any = '') => {
		let res = await wx_Payment({ merOrderId: billId });
		if (!res.result || !res.object) {
			rezSubmitParams()
			mApi.msg(res.shortMessage || '支付失败');
			return
		}
		const nres = res.object || {};
		const { nonceStr, paySign, signType, timeStamp } = nres;
		hideLoading();
		wx.requestPayment({
			provider: 'wxpay',
			timeStamp: timeStamp || '',
			nonceStr: nonceStr || '',
			package: nres.package || '',
			signType: signType || '',
			paySign: paySign || '',
			success: function (res) {
				// navToNextPage()

				uni.redirectTo({ url: `/pages/order/orderSuccess/orderSuccess?pageOrg=recharge&vbill_id=${billId}&payAmount=${rechargeNum.value}` })
				console.log('支付成功');
			},
			fail: function (err) {
				rezSubmitParams()
				console.log('支付失败', err);
			}
		});
	}
	//选择套餐
	const chooseMeal = index => {
		typeClass.value = index;
		let item = rechargeList.value[index] || {};
		rechargeNum.value = item.activityPrice ? item.activityPrice || 0 : item.nsell_price || 0;
		rechargeMoney.value = item.specs_name || item.nsell_price || 0;
		rechargeSku.value = item.sku || '';
		let rmks = [];
		rechargeList.value[index].remark?rmks.push(rechargeList.value[index].remark):''
		remarksList.value = rmks;
	}
	const handleCards = () => {
    if(hasCard){
      checkdRef.value.open()
    }
	}
	const hasCard = ref(true)
	// 选卡回调
	const choseCad = (card : any) => {
		nowChoseCadr.value = card.curCard || {};
		hasCard.value = card.hasCard || false;

		console.log('选卡回调---------------------', card, hasCard.value)
		if (card.source == 'init' && !hasCard.value && isLogin.value) {
			isfavRef.value.open();
		}
	}
	const cals = (flag : any) => {
		if (flag) {
			//开卡
			isfavRef.value.close();
			mnavTo('/pages/user/openVip/openVip')
		} else {
			//绑卡
			isfavRef.value.close();
			mnavTo('/pages/user/bindingCards/bindingCards')
		}
	}
	const goBack = () => {
		uni.switchTab({
			url: '/pages/index/user/user'
		})
	}
</script>

<style lang="scss">
	.full_btn {
		width: 100%;
		text-align: center;
		min-height: 100rpx;
		color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: 40rpx;
		z-index: 6;
		min-height: 100rpx;
		background-color: #FAFAFA;
	}

	.carstyle {
		width: 654rpx;
		padding: 32rpx 64rpx;
		color: #fff;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.kaika {
		color: #333;

		.cuIcon-right {
			font-size: 24rpx;
		}
	}

	.bangka {
		background: #53A87F;
		margin-bottom: 26rpx;
	}

	.modelcon {
		width: 100%;
		height: 680rpx;
		padding-top: 30rpx;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;

		.favs {
			color: #000;
			font-size: 36rpx;
			font-style: normal;
			font-weight: 700;
			text-align: center;
			padding-bottom: 60rpx;
		}

		.fcon-tishijinggao {
			color: #f0f0f0;
			font-size: 96rpx;
			padding-bottom: 28rpx;
		}

		.fav_v {
			color: #999;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0.32px;
			text-align: center;
			padding-bottom: 80rpx;
		}

		.foot_btn {
			display: flex;
			padding: 0rpx 55rpx 0rpx 55rpx;
			margin-top: 50rpx;
			justify-content: space-between;

			.btns {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 654rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 10rpx;
				color: #333;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: -0.25px;
				padding: 54rpx 64rpx
			}

			.su {
				margin-top: 20rpx;
			}

			.can {
				background: #53A87F;
				color: #fff;
			}
		}
	}

	.paddingTop {
		padding-top: 40rpx;
	}

	.titip-text {
		color: #999;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0.28px;
		padding: 0 40rpx;
		margin-top: -340rpx;
		background-color: #FAFAFA;
		text-align: left;
	}

	.topSec {
		min-height: 390rpx;
		background: #70DEB1;
	}

	.mainBx {
		width: calc(100vw - 32rpx);
		margin-left: 16rpx;
		border-radius: 16rpx;
		background: #FFF;
		z-index: 2;
		left: 0;
		top: -360rpx;
	}

  .redfont{
    color: #FF0E0E !important;
  }
	.plhcs {
		color: #D5D5D5;
		font-size: 32rpx;
	}

	.R-stores {
		width: 100%;
		height: 98rpx;

		.R-stitel {
			min-width: 164rpx;
			color: #666;
			// margin-left: 35rpx;
			// font-size: 27rpx;
			// font-family: PingFang-SC-Regular;
			// font-weight: 400;
			// color: #333333;
		}

		// .R-stxt {
		// 	font-size: 30rpx;
		// 	font-family: PingFang-SC-Regular;
		// 	font-weight: 400;
		// 	color: #333333;
		// 	text-align: right;
		// 	padding-right: 31rpx;
		// }

		.R-balance {
			font-size: 30rpx;
			font-family: PingFang-SC-Regular;
			font-weight: 400;
			color: #dd3129;
			text-align: right;
			padding-right: 31rpx;
		}

		.R-money {
			font-size: 27rpx;
			font-family: PingFang-SC-Regular;
			font-weight: 400;
			margin-right: 31rpx;
		}
	}

	.Rechargeamount {
		width: 100%;

		.A-titel {
			padding-left: 31rpx;
			margin-top: 44rpx;
			font-size: 27rpx;
			font-family: PingFang-SC-Regular;
			font-weight: 400;
			color: #999999;
		}

		.A-ambox {
			width: 200rpx;
			height: 200rpx;
			margin-right: 38rpx;
			margin-top: 42rpx;
			text-align: center;
			border-radius: 16rpx;
			background: #F0F0F0;

			&:nth-child(3n) {
				margin-right: 0;
			}

			.amContentBox {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;
				overflow: hidden;
			}

			.thTip {
				width: 90rpx;
				font-size: 18rpx;
				line-height: 30rpx;
				color: #fff;
				text-align: center;
				background: linear-gradient(270deg, #FF7A00 0%, #F7B500 151.35%);
				position: absolute;
				left: -24rpx;
				top: 9rpx;
				transform: rotate(-45deg);
			}

			.A-ammony {
				font-size: 40rpx;
				font-family: PingFang-SC-Bold;
				font-weight: 500;
				color: #686868;
				overflow: hidden;
			}

			.A-amintegral {
				font-size: 24rpx;
				font-family: PingFang-SC-Regular;
				font-weight: 400;
				color: #aaaaaa;
				margin-top: 10rpx;
			}

			.img {
				width: 57rpx;
				height: 64rpx;
				position: absolute;
				left: 5rpx;
				top: 5rpx;
			}
		}

		.on {
			background: #53A87F;
			box-shadow: 0px 2px 18px 0px rgba(86, 191, 122, 0.30);

			.A-ammony,
			.A-amintegral {
				color: #fff;
			}
		}

		.Immediaterecharge {
			width: 100%;
			height: 100rpx;
			background: linear-gradient(90deg, rgba(40, 176, 91, 1) 0%, rgba(70, 183, 155, 1) 100%);
			font-size: 38rpx;
			font-family: PingFang-SC-Regular;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			line-height: 100rpx;
			position: fixed;
			left: 0;
			bottom: 0;

			&.gray {
				background: #c1c1c1;
			}
		}
	}

	.adetbx {
		width: calc(100% - 40rpx);
		max-height: 260rpx;
		border-radius: 16rpx;
		background: #FFF;
		box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
		overflow: hidden;
		padding: 20rpx 0 60rpx 20rpx;

		&.show {
			max-height: fit-content;
		}
	}

	.morbox {
		position: absolute;
		width: 100%;
		height: 60rpx;
		right: 0;
		bottom: 0;
	}

	.hide {
		display: none;
	}

	.justColor {
		position: absolute;
		background-color: white;
		height: 100%;
		width: 100%;
	}

	.noData {
		line-height: 260rpx;
		width: 100%;
		font-size: 32rpx;
		color: #cccccc;
		text-align: center;
		margin-top: 50rpx;
	}

	.statuIco {
		font-size: 176rpx;
		text-align: center;
		color: #2ab05e;
		margin-top: 78rpx;
	}

	.payRusult {
		color: #666666;
		font-size: 32rpx;
		font-family: HiraginoSansGB-W3;
		text-align: center;
	}

	.money {
		color: #666666;
		font-size: 42rpx;
		font-family: HiraginoSansGB-W3;
		text-align: center;
		margin-top: 58rpx;
	}

	.confirm {
		height: 76rpx;
		color: #30b16a;
		font-family: HiraginoSansGB-W3;
		border: 1px solid #43b695;
		border-radius: 8rpx;
		width: 90%;
		font-size: 30rpx;
		margin-top: 22%;
		margin-left: 5%;
	}

	.bigMoney {
		font-size: 70rpx;
	}

	.noti {
		color: #666666;
		font-size: 32rpx;
		font-family: HiraginoSansGB-W3;
		text-align: center;
	}

	// 二维码弹窗
	.cu-dialog {
		width: 84%;
		overflow: visible;

		&.bgtran {
			background-color: transparent;
		}

		.indexImg {
			width: 100%;
			height: 768rpx;

			image {
				width: 427rpx;
				height: 427rpx;
				margin-top: 100rpx;
			}

			view {
				height: 164rpx;
				color: #666666;
				font-size: 32rpx;
				font-family: HiraginoSansGB-W3;
				line-height: 158rpx;
				text-align: center;
				margin-top: 74rpx;
			}
		}

		.imgCloseBtn {
			width: 40px;
			height: 40px;
			color: #fff;
			font-size: 36px;
			font-weight: 100;
			position: absolute;
			left: 50%;
			margin-left: -18px;
			bottom: -50px;
		}
	}

	.listbx {
		min-height: 260rpx;
	}
</style>